<template>
	<view class="content">
		<view class="container">
			<view class="top_search">
				<image src="/static/index/top_logo.png" mode="widthFix" class="top_search_logo"></image>
				<view class="search_box">
					<image src="/static/index/icon_search.png" mode="widthFix" class="search_icon"></image>
					<input type="text" class="search_input" v-model="search_name" @confirm="search"
						placeholder="搜索商品、盲盒关键词">
				</view>
			</view>

			<view class="goods_list">
				<view class="goods_item normal_bg" v-for="item,id in list" :key="id" @tap="go_detail(item.id)">
					<image :src="item.image" mode="aspectFill" class="goods_img"></image>
					<view class="goods_details" style="">
						<view class="goods_name" style="">
							<view class="goods_name_text">
								{{item.name}}
							</view>
							<view class="funeng">
								赋能
							</view>
						</view>
						<view class="author_box">
							{{item.author_name}}
						</view>
						<view class="price_box">
							<text class="pre">￥</text>{{item.price}}
						</view>
					</view>
				</view>

			</view>
			<view class="see_more normal_bg" v-if="hasNextPage" @tap="next_page">
				查看更多
			</view>
			<view class="no_more" v-else>
				没有更多了
			</view>
		</view>
		<view style="height: 200rpx;"></view>


	</view>
</template>

<script>
	import tabbarqn from '@/components/tabbarqn.vue'
	export default {
		components: {
			tabbarqn
		},
		data() {
			return {
				page: 1,
				limit: 10,
				list: [],
				hasNextPage: true,

				search_name: ''
			}
		},
		onLoad(options) {
			this.search_name = options.key
			this.get_data_list();

		},

		onPullDownRefresh() {
			this.get_data_list();
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
		},

		methods: {
			search: function() {
				let name = this.search_name;
				this.get_data_list()
			},

			go_detail: function(id) {
				uni.navigateTo({
					url: 'details?buy=2&id=' + id
				})
			},


			get_data_list: function() {
				this.hasNextPage = true;
				this.list = []
				this.page = 1;

				let data = {
					page: this.page,
					limit: this.limit,
					keyword: this.search_name,
					type: 1
				}
				this.$api.getIndexData(data, res => {
					if (res.status) {
						this.list = res.data;
						this.hasNextPage = res.data.length >= this.limit
					}
				})
			},


			next_page: function() {

				if (this.hasNextPage) {
					let new_page = this.page + 1;
					let data = {
						page: new_page,
						limit: this.limit,
						keyword: this.search_name
					}
					this.$api.getIndexData(data, res => {
						if (res.status) {
							this.list = this.list.concat(res.data);
							this.hasNextPage = res.data.length >= this.limit;
							this.page = new_page
						}
					})
				}
			},

		},
		onUpload() {}
	}
</script>

<style lang="scss">
	.top_search {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;

		.top_search_logo {
			width: 160rpx;
			height: 51rpx;
			margin-right: 20rpx;
		}

		.search_box {
			flex: 1;
			height: 63rpx;
			background: #F2F2F2;
			border-radius: 100rpx;
			opacity: 1;
			padding: 0rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.search_icon {
				width: 26rpx;
				height: 28rpx;
			}

			.search_input {
				flex: 1;
				height: 63rpx;
				padding-left: 17rpx;
				font-size: 24rpx;
				color: #000;
			}
		}

	}

	.container {
		width: 100%;
		padding: 0 30rpx;
		position: relative;
		z-index: 10;
		padding-top: var(--status-bar-height);
	}

	.no_more {
		margin: 30rpx auto;
		font-size: 24rpx;
		color: #d4d4d4;
		width: 100%;
		text-align: center;

	}

	.see_more {
		margin: 30rpx auto;
		width: 200rpx;
		height: 60rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #000000;
	}

	.goods_list {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;

		.goods_item {
			width: 335rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			background-color: #fff;

			.goods_img {
				width: 100%;
				border-radius: 20rpx;
				height: 451rpx;
			}

			.goods_details {
				padding: 10rpx 20rpx;

				.goods_name {
					display: flex;
					align-items: center;

					.goods_name_text {
						max-width: 220rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.funeng {
						width: 69rpx;
						height: 33rpx;
						font-size: 22rpx;
						color: #FF0000;
						background: #FEEEEE;
						margin-left: 20rpx;
						padding: 0 10rpx;
						display: flex;
						align-items: center;
					}
				}

				.author_box {
					font-size: 22rpx;
					color: #B7B6C2;
					padding: 5rpx 0;
				}

				.price_box {
					font-size: 32rpx;

					.pre {
						font-size: 20rpx;
					}
				}
			}
		}
	}

	page {
		background-color: #f7f8f8;
	}
</style>
